<!--
 * @Author: boyyang
 * @Date: 2022-01-08 20:07:03
 * @LastEditTime: 2022-01-26 16:00:40
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\home\homeMenuItem.vue
-->

<template>
    <div class="menu-item" @click="itemClick">
        <i :class="['iconfont', 'icon-item', props.iconName]"></i>
        <div :class="['item-name', { 'item-name-hide': !props.isShow }]">{{ props.name }}</div>
    </div>
</template>

<script lang="ts" setup>
interface IMenuItemProps {
    isShow?: boolean;
    hoverBg?: string;
    hoverColor?: string;
    iconName?: string;
    iconColor?: string;
    iconSize?: string | number;
    name?: string;
    nameColor?: string;
    nameSize?: string | number;
    tag?: any
}

interface IMenuItemEmits {
    (e: 'itemClick', tag: any): void
}

const props = withDefaults(defineProps<IMenuItemProps>(), {
    isShow: true,
    hoverBg: 'black',
    hoverColor: 'white',
    iconName: 'icon-shouye2',
    iconColor: 'white',
    iconSize: 25,
    name: 'Home',
    nameColor: 'white',
    nameSize: 16,
    tag: ''
})

const emits = defineEmits<IMenuItemEmits>()

const itemClick = () => {
    emits('itemClick', props.tag)
}
</script>

<style scoped lang="scss">
.menu-item {
    width: 80%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    padding: 15px 10px;
    border-radius: 0;
    background: none;

    &:hover {
        background-color: v-bind("props.hoverBg");
        border-radius: 10px;
        color: v-bind("props.hoverColor");
        transition: all 0.5s linear;

        &::before {
            content: "";
            box-sizing: border-box;
            width: 2px;
            height: 60%;
            background-color: #fff;
            position: absolute;
            left: -20px;
            border-radius: 2px;
            box-shadow: 0 0 2px rgb(123, 201, 175), 0 0 5px rgb(123, 201, 175),
                0 0 7px rgb(123, 201, 175), 0 0 9px rgb(123, 201, 175),
                0 0 11px rgb(123, 201, 175), 0 0 13px rgb(123, 201, 175),
                0 0 15px rgb(123, 201, 175);

            animation: appear 0.5s linear;
        }
    }

    @keyframes appear {
        0% {
            opacity: 0;
            left: 150px;
        }

        100% {
            opacity: 1;
            left: -20px;
        }
    }
}

.icon-item {
    font-size: calc(v-bind("props.iconSize") * 1px);
    color: v-bind("props.iconColor");
}

.item-name {
    width: 80%;
    font-family: "Times New Roman", Times, serif;
    font-size: calc(v-bind("props.nameSize") * 1px);
    color: v-bind("props.nameColor");
    margin-left: 50px;

    animation: move 1s linear;

    @keyframes move {
        0% {
            margin-left: -50px;
        }

        100% {
            margin-left: 50px;
        }
    }
}

.item-name-hide {
    animation: hidden 1s linear;
    position: absolute;
    left: 99px;
    @keyframes hidden {
        0% {
            left: 50px;
        }

        100% {
            left: 99px;
        }
    }
}
</style>
